import { Divider, Grid, Input, Button, Tag ,Tabs ,Typography } from '@arco-design/web-react';
const { Col, Row } = Grid;
import { IconArrowLeft, IconUser, IconUndo, IconEdit, IconSync, IconRight, IconFile, IconDelete, IconUpload, IconPlus } from '@arco-design/web-react/icon';
import React from 'react'

import { useState } from 'react';
import { useBoolean } from 'ahooks';

import InfoCollection from "./InfoCollection";
import TagkeyCode from "./TagkeyCode"
import StepsCourse from './StepsCourse';
import TagLists from './TagLists';
const Aicreate = () => {
    const [stepsCurrent, setStepsCurrent] = useState(2);

    const [flowStep, setFlowStep] = useState({
        1: { submitFlag: 0 },  // submitFlag 开始拓写(填写文案-已生成 2 /loading 1 / 未填写文案 0)
        2: {},
        3: {},
    })

    const submitInfo = (info) => {
        console.log("开始拓写info", info);

        if (!info.name || !info.intro) return React.$message.warning("请先填写产品文案");

        // flowStep[1].submitFlag = 1 ;
        setFlowStep({ ...setFlowStep, 1: { submitFlag: 1 } })
        // 请求接口
        setTimeout(() => {
            setFlowStep({ ...setFlowStep, 1: { submitFlag: 2 } })
        }, 1000)
    }

    let List = new Array(10).fill(1).map((item, index) => {
        return { name: "改善肤色" + index, checked: false }
    })
    const [tagList, setTagList] = useState(List);

    const [textContent, setTextContent] = useState('其中包含了一些关键字，比如：改善肤色1 科技、创新和人工智能改善肤色2。')
    const [editFlag, { toggle: toggleEditFlag }] = useBoolean(false);
    const [keywords, setKeywords] = useState([])

    const tagClick = (index) => {
        let checked = tagList[index].checked;
        let newList = [...tagList];
        // 设置选中状态
        newList[index].checked = !checked;
        setTagList(newList);
        // 设置文案标亮
        setKeywords([...keywords, newList[index].name])
        checked && setKeywords(keywords.filter(item => item !== newList[index].name))

    }
    const deleteTagOne = (tagName) => {
        let newKeyCode = [...keywords]
        let index = keywords.findIndex(item => item === tagName)
        index !== -1 && newKeyCode.splice(index, 1) && setKeywords(newKeyCode)
    }
    const tipText = (text, text2) => {
        // return  <div className='fixed top-[50%] left-[62%] text-gray-300 cursor-default'>请先在左侧填写产品卖点 ,<br></br>填写后可生成AI卖点至此处</div>
        return (<div className='fixed top-[50%] left-[62%] text-gray-300 cursor-default'>{text} ,<br></br>{text2}</div>)
    }
    const style = {
        textAlign: 'center',
        marginTop: 20,
      };

    const addTagOne = (tagName) => setKeywords([...keywords, tagName])
    return <div className='w-full h-full' style={{ backgroundColor: 'rgb(239,244,250)' }}>
        <StepsCourse current={stepsCurrent}></StepsCourse>
        <div className="px-10 pt-10 pb-20  w-full h-[90%] relative">
            {stepsCurrent !== 1 && <div className="flex items-center text-blue-700 ml-10 cursor-pointer " onClick={() => setStepsCurrent(stepsCurrent - 1)}><IconArrowLeft />返回上一步</div>}

            <div className={`z-[${stepsCurrent == 1 ? 7 : 6}] absolute left-0 top-30 overflow-y-hidden min-h-[450px] flex border-solid shadow-md shadow-gray-200 m-10 w-[99%] h-full rounded-[10px] bg-[rgb(248,252,255)]`}>

                {/* 左栏1 */}
                <InfoCollection submit={submitInfo} ></InfoCollection>
                {/* 右栏1 */}
                <div className='w-[68%] h-full bg-[rgb(241,249,255)] p-15 overflow-y-auto rounded-lg'>
                    <Row className="border-b-1 pb-8">
                        <IconFile style={{ fontSize: '20px', color: 'rgb(40,139,244)' }} />
                        <div className='ml-8 text-[16px] font-medium'>AI卖点挖掘</div>
                    </Row>
                    {flowStep[1].submitFlag === 0 && tipText("请先在左侧填写产品卖点 ,", "填写后可生成AI卖点至此处")}
                    {flowStep[1].submitFlag === 1 && <div className='fixed top-[50%] left-[62%] text-gray-300 cursor-default'><IconSync spin style={{ fontSize: 40 }} /></div>}
                    {flowStep[1].submitFlag === 2 &&
                        <>
                            <Row justify='space-between' className='mt-10'>
                                <Col span={5}>挖掘的卖点</Col>
                                <Col span={5} className="text-blue-600 cursor-pointer"><IconUndo /> 卖点回填</Col>
                            </Row>
                            <TagLists tagList={tagList} tagClick={tagClick} addTagOne={addTagOne} deleteOne={deleteTagOne}></TagLists>
                            <Row className="my-10">拓写内容</Row>
                            <div className='h-[55%] w-full mt-5 relative'>
                                {!editFlag && <div className="absolute top-5 left-1 z-[7] h-[calc(100%-30px)]">
                                    <TagkeyCode text={textContent} keywords={keywords} />
                                </div>}
                                <Input.TextArea autoSize={false}
                                    value={editFlag && textContent || ''}
                                    onChange={(e) => setTextContent(e)}
                                    className="bg-[rgb(235,246,251)] rounded-lg h-[100%] rounded-10" placeholder='' />
                                <div className='flex items-center rounded-[10px] absolute h-30 bottom-1 right-1 bg-[rgb(229,242,249)] w-[calc(100%-2px)]'>
                                    <div className='text-blue-600 ml-10 text-[12px] cursor-pointer' onClick={toggleEditFlag}><IconEdit /> {!editFlag ? "编辑" : '预览'}</div>
                                    <div className='text-blue-600 ml-20 text-[12px] cursor-pointer'><IconSync /> 重新生成</div>
                                </div>
                            </div>
                            <div className='flex flex-row-reverse mt-20'>
                                <Button className="bg-blue rounded-20 text-white" type='primary' onClick={() => { setStepsCurrent(2) }}>配置营销目的 <IconRight /></Button>
                                <Button className="text-blue-500 bg-white rounded-20 w-100 mr-20">暂存</Button>
                            </div>
                        </>
                    }
                </div>

            </div>

            <div className={`z-[${stepsCurrent === 2 ? 7 : 6}] absolute left-0 top-30 overflow-y-hidden min-h-[450px] flex border-solid shadow-md shadow-gray-200 m-10 w-[99%] h-full rounded-[10px] bg-[rgb(248,252,255)]`}>
                {/* 左栏2 */}
                <div className='w-[50%] h-full p-15 bg-[rgb(247,253,255)] relative'>
                    <Row className="pb-8 flex items-center">
                        <IconFile style={{ fontSize: '20px', color: 'rgb(40,139,244)' }} />
                        <div className='ml-8 text-[16px] font-medium'>配置直播流程</div>
                    </Row>
                    <Row className='text-gray-300 my-10 text-[12px]'>现在需要对你的直播间进行流程划分，流程划分后，可针对每个细分的流程配置不同营销目的，并为该目的配置AI卖点文案</Row>
                    <div className='rounded-[8px]  h-64 border-solid border-1 border--gray-200 mt-10 '>
                        <div className='h-28 flex justify-between' >
                            <div className='flex items-center justify-between '>
                                <div className='flex items-center ml-10'>
                                    流程:
                                    <Input className='ml-10 w-130 border-none h-[80%]' placeholder='请输入流程名称' />
                                    <IconEdit style={{ color: 'rgb(40,139,244)' }} />
                                </div>
                            </div>
                            <div className='text-[rgb(40,139,244)] mr-10 flex items-center text-[12px]'>
                                <span className='mr-15 cursor-pointer'>保存<IconUpload style={{ color: 'rgb(40,139,244)' }} /></span>
                                <span className='cursor-pointer'>删除<IconDelete style={{ color: 'rgb(40,139,244)' }} /></span>
                            </div>
                        </div>

                        <div className='h-36 bg-[rgb(235,246,251)] rounded-[8px] flex items-center'>
                            <div className='text-[rgb(40,139,244)] text-[12px] ml-15 cursor-pointer'>添加目的<IconPlus style={{ color: 'rgb(40,139,244)' }} /></div>
                        </div>

                    </div>
                    <div className='text-[12px] absolute bottom-20 bg-white w-full h-35 flex justify-center items-center text-[rgb(40,139,244)] rounded-5 cursor-pointer'>
                        添加流程(1/10) <IconPlus className='ml-10' style={{ color: 'rgb(40,139,244)' }} />
                    </div>
                </div>
                {/* 右栏2 */}
                <div className='w-[50%] h-full p-15 bg-[rgb(239,249,255)] relative'>
                    <Row className="pb-8 flex items-center">
                        <IconFile style={{ fontSize: '20px', color: 'rgb(40,139,244)' }} />
                        <div className='ml-8 text-[16px] font-medium'>直播间流程文案</div>
                    </Row>
                    <Tabs defaultActiveTab='1'>
                        <Tabs.TabPane key='1' title='Tab 1'>
                            <Typography.Paragraph style={style}>Content of Tab Panel 1</Typography.Paragraph>
                        </Tabs.TabPane>
                        <Tabs.TabPane key='2' title='Tab 2' disabled>
                           
                        </Tabs.TabPane>
                        <Tabs.TabPane key='3' title='Tab 3'>
                           
                        </Tabs.TabPane>
                    </Tabs>

                    <div className='absolute bottom-10 left-[4%] w-[92%] h-[50px] bg-[rgb(229,241,249)] rounded-10 border-solid border-1 border-blue-500'>
                        <IconFile className='font-bold text-[24px] ml-10 mt-10 color-[rgb(40,139,244)]' style={{ color: 'rgb(40,139,244)' }} />
                    </div>
                </div>
            </div>

        </div>

    </div>
}


export default Aicreate;